<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../css/common.css" />
	</head>
	<body>
		
		城市：
		<select id="city">
			<option>深圳</option>
			<option>长沙</option>
			<!--<option>兰州</option>-->
		</select>
		
		<br/>
		
		<br>
		<input type="text" id="addValue" value="北京" placeholder="请输入要增加的城市..." />
		<!--验证是否重复-->
		<input type="button" id='addButton'   value="增加" />
		<br/>
		<br/>
		
		<input type="text"  name="deleteInput" value="深圳"  placeholder="请输入要删除的城市..."  />
		<!-- 判断被删除的元素是否在里面-->
		<input type="button" id="deleteButton" value="删除"  />
		<br/>
		<br/>
		
		<input type="text" placeholder="请输入修改前的城市..." />
		<!--修改之前必须存在长沙  修改之后的值不能与非长沙的地名重名-->
		<input type="button" value="修改"  />
		<input type="text" placeholder="请输入修改后的城市..." />
		<br/>
		<br/>
		
		<input type="text" placeholder="请输入要查询的城市..."  />
		<!-- 有 alert 存在  长沙存在   长沙的下标 -->
		<!-- 无 alert 长沙不存在  -->
		<input type="button" value="查询"  />
		<br/>
	</body>
	
	<script type="text/javascript" src="../../js/jquery-1.7.2.js" ></script>
	
	<script>
	
		//$(function(){
		$(document).ready(function(){

			
			$("#deleteButton").click(function(){
				//拿到文本框的值
				
				var v = $('input[name="deleteInput"]').val();
				console.log(v);
				
				//遍历city并且拿到它所有的儿子 判断 如果相同 删除 <opiton>长沙</option>
				var city = $('#city');
				console.log(city.length);
				
				var cs = city.children();
				console.log(cs.length);
				
				cs.each(function(index,data){
					
					//        拿到1个jQuery的对象 <opiton>长沙</option>
					//data    拿到1个JS的对象 <opiton>长沙</option>
					//console.log(data);
					//console.log(data.innerText);
					//console.log(data.innerHTML);
					//console.log('%c'+data.textContent,'color:red');
					
					var wenben =$(data).text();
					console.log(wenben);
					
					if(wenben == v){
						$(data).remove();
						alert('删除'+v +'成功....');
						
						//此处不能写break 必须用return; jQuery对js做了封装...
						return ;
					}
					
					console.log('index='+index);
					
				});
				
				
			});
			
			
			$("#addButton").click(function(){
				
				//什么用id 什么时候用name
				//只要是form表单中的便签  全部给我加上name属性  其他用id
				//class 表格的多行 class
				
				//var v = $('#addValue').attr('value');
				var v = $('#addValue').val();
				console.log(v);
				
				var option = $('<option></option>');
				
				//设置value属性的值
				//option.val('10086');
				option.attr('value','10086');
				
				var date  = new Date();
				var year  = date.getFullYear();
				var month = date.getMonth()+1
				var d     = date.getDate();
				option.attr('yrr',""+year+month+d);
				
				//设置标签里面的文本内容
				option.text(v);
				
				var city = $('#city');
				
				city.append(option);
				
			});
			
		});
		
		
	</script>
</html>
